<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" aria-labelledby="createOrEditModal" class="modal fade" tabindex="-1"
    role="dialog" aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="kt-portlet__head-tools width-percent-70" style="margin-left:15px;margin-top:30px;">
                <div class="form-group  width-percent-100">
                    <div class="input-group" style="justify-content: flex-start">
                        <date-range-picker [dateRangePickerOptions]='{ "opens": "left"}' [needInitDate]="true" [admitDelete]="false" #orderDateranger style="width: 80%;"
                            name="orderDateranger" [(startDate)]="StartTime" [(endDate)]="EndTime" [allowFutureDate]="false">
                        </date-range-picker>
                        <span class="input-group-btn">
                            <button (click)="getList()" class="btn btn-primary   fixed-button" type="button">
                                <i class="icon-sousuo-sousuo"></i>
                            </button>
                        </span>
                    </div>
                </div>
            </div>
            <div [class]="containerClass">
                <div class="card card-custom gutter-b" style="margin-bottom: 0 !important;">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                                <p-table #dataTable (onLazyLoad)="getList($event)" [value]="primengTableHelper.records" [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                    [paginator]="false" [lazy]="true" [responsive]="primengTableHelper.isResponsive">
                                    <ng-template pTemplate="header">
                                        <tr>
                                            <th style="width:5%">{{l('RecordId')}}</th>
                                            <th>{{l('memberName')}}</th>
                                            <th>{{l('product')}}</th>
                                            <th>{{l('buyTime')}}</th>
                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="body" let-record let-i="rowIndex">
                                        <tr [pSelectableRow]="record" [attr.trid]="record.id">
                                            <td style="width:5%"> {{transIndex(i)}}</td>
                                            <td>
                                                <span>{{record.memberName?record.memberName:'-'}}</span>
                                            </td>
                                            <td>
                                                <span>{{record.title}}</span>
                                            </td>
                                            <td>
                                                <span>{{record.orderDateTime| date : "yyyy/MM/dd"}}</span>
                                            </td>
                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="emptymessage" let-records>
                                        <tr *ngIf="primengTableHelper.records">
                                            <td colspan="4">
                                                <img class="emptymessage" src="/assets/common/images/placeholder/orderHolder.png" />
                                            </td>
                                        </tr>
                                    </ng-template>
                                </p-table>
                                <div class="primeng-paging-container">
                                    <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator (onPageChange)="getList($event)" [totalRecords]="primengTableHelper.totalRecordsCount"
                                        [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                    </p-paginator>
                                    <span class="total-records-count">
                                        {{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}}
                                    </span>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>











        </div>
    </div>
</div>